<template>
	<view>
		<uni-nav-bar :title="type==1?$t('personal.editloginPwd'):$t('personal.editpayPwd')" :fixed="true" :border="false" color="var(--theme-text-color)" backgroundColor="var(--theme-color)"></uni-nav-bar>
		<view class="icon-xl circle flex-center back-btn" style="position: fixed;top: 5px;left: 16px;z-index: 100;" @click="backPage">
			<uni-icons type="arrow-left" size="24" color="#fff"></uni-icons>
		</view>
		<view class="p-lr-16 mt20">
			<view class="" style="padding-bottom: 50px;">
				<uni-forms :modelValue="pwdInfo" ref="pwdRule" label-position="top" :rules="rules">
					<uni-forms-item :label="$t('personal.oldPwd')" name="opwd">
						<uni-easyinput class="u-input" style="padding: 5px 10px !important;" :inputBorder="false" v-model="pwdInfo.opwd" type="password" :placeholder="$t('enter')+$t('personal.oldPwd')"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item :label="$t('personal.newPwd')" name="npwd">
						<uni-easyinput class="u-input" style="padding: 5px 10px !important;" :inputBorder="false" v-model="pwdInfo.npwd" type="password" :placeholder="$t('enter')+$t('personal.newPwd')"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item :label="$t('personal.renewPwd')" name="rnpwd">
						<uni-easyinput class="u-input" style="padding: 5px 10px !important;" :inputBorder="false" v-model="pwdInfo.rnpwd" type="password" :placeholder="$t('enterAgain')+$t('pwd')"></uni-easyinput>
					</uni-forms-item>
					<button :class="['btn-submit', disabled?'login-btn-disabled':'login-btn']" :disabled="disabled" @click="submitForm">保存</button>
				</uni-forms>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, watch } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import { editLoginPwd, editPayPwd } from '../../../api/index.js'
	import useGlobalProperties from '../../../utils/useGlobalProperties.js'
	const { $t,$i18n } = useGlobalProperties()
	import { useUserStore } from '@/store/index.js'
	const userStore = useUserStore()
	const backPage = () =>{
		// 返回上一页
		// uni.navigateBack({
		//   delta: 1 // 默认值为1，表示返回上一页
		// });
		history.back()
	}
	const type = ref(null)
	const disabled = ref(true)
	const pwdInfo = ref({
		opwd:'',
		npwd:'',
		rnpwd:''
	})
	const pwdRule = ref(null)
	const rules = ref({
		opwd: { rules:[ { required: true, errorMessage: $t('enter')+$t('personal.oldPwd'), } ]},
		npwd: { rules:[ { required: true, errorMessage: $t('enter')+$t('personal.newPwd'), } ]},
		rnpwd: { rules:[ { required: true, errorMessage: $t('enterAgain')+$t('pwd'), },
		 { validateFunction:function(rule,value,data,callback){
		 	if (value != pwdInfo.value.rnpwd) {
		 		callback($t('pwdnosome'))
		 	}
		 	return true
		 } },
		 ]},
	})
	// 监听 loginForm 对象的变化
	watch(pwdInfo, (newVal, oldVal) => {
	  if(pwdInfo.value.opwd && pwdInfo.value.npwd && pwdInfo.value.rnpwd ){
		  disabled.value = false
	  }else{
		  disabled.value = true
	  }
	}, { deep: true });  // 设置 deep 为 true 以便深度监听对象的变化
	onLoad((options)=>{
		type.value = options.type
	})
	const submitForm= () =>{
		pwdRule.value.validate(valid =>{
			if(!valid){
				const params = {
					old_password:pwdInfo.value.opwd,
					new_password:pwdInfo.value.npwd,
					confirm_password:pwdInfo.value.rnpwd,
				}
				if(type.value == 1){
					editLoginPwd(params).then(res =>{
						if(res.code == 1){
							uni.showToast({
								title:$t('personal.jumpTips'),
								icon:'none'
							})
							setTimeout(() =>{
								uni.clearStorage()
								userStore.value.setUserInfo({});
								uni.reLaunch({
									url:'/pages/login/login'
								})
							},1500)
						}
					})
				}else{
					editPayPwd(params).then(res =>{
						if(res.code == 1){
							uni.showToast({
								title:$t('editsucess'),
								icon:'none'
							})
							backPage();
						}
					})
				}
			}
		})
		
	}
</script>

<style scoped>
	.u-input {
	    border-radius: 12px!important;
	    background-color: var(--theme-box-bg) !important;
	    padding: 15px 20px!important;
		font-size: 15px !important;
	}
	::v-deep uni-button:after{
		border: none!important;
	}
	.uni-easyinput{
		background-color: var(--theme-box-bg) !important;
	}
</style>
